<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡</title>
  <style>
    div{
      width: 20%;
      height: 100px;
      background-color: red;
      /* 添加过渡 变化的属性,宽高,背景色,内外边距,如果都想变 all 
      变化花费的时间 1s
      变化的特效,曲线, 均匀,匀速变化,减速,加速 先快后慢,先慢后快
      什么时候开始变化 
      */
      /* 单独一个的属性的变化 */
      /* transition: width 1s linear 0s; */
      /* 添加多个的属性的变化 */
      /* transition: width 1s linear 0s,height 1s linear 0s; */
      /* 加速变化 ease-in  减速ease-out  ease 先减后加  县加速再减速 */
      transition: width 10s ease-in-out 0s;
    }
    /* 最终过渡的效果 */
    div:hover{
      width: 100%;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div>
    过渡 transition 是css3颠覆性的特征之一 以前需要实现类似的效果,flash()或者是js
    当元素变化成另一种样式的时候,添加效果,经常和 :hover连用
    &lt;
   
  </div>
</body>
</html>